<template>
    <div class="slider" ref="slider">
      <swiper :options="swiperOptions" class="wrapper">
        <swiper-slide class="slide-item" v-for="(item, index) in recommends" :key="index">
          <a :href="item.linkUrl">
            <img @load="$emit('loadImage')" class="gallary-img" :src="item.picUrl" alt="">
          </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
// import BScroll from 'better-scroll'
// import { addClass } from '@/common/js/dom'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'slider',
  components: {Swiper, SwiperSlide},
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        loop: true,
        autoplay: true
      }
    }
  },
  props: {
    recommends: Array
  },
  mounted() {
  },
  methods: {
    loadImage() {
      // this.$refs.scroll.refresh()
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import 'swiper/css/swiper.css'
  @import "~@/common/stylus/variable"
  .slider
    min-height: 1px
    .wrapper
      position: relative
      overflow: hidden
      white-space: nowrap
      /*height 170px*/
      .slide-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center
        a
          display block
          width 100%
          overflow hidden
          text-decoration none
          .gallary-img
            display block
            width 100%
</style>
